<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta name="referrer" content="no-referrer"/> -->
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .container {
            width: 1200px;
            margin: auto;
        }

        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        li {
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }

        img {
            width: 100%;
            height: 300px;
        }

        li span {
            display: block;
        }

        .loginIn,
        .noLogin {
            display: none;
        }


        .off {
            color: #999;
        }
    </style>
</head>

<body>

    <div class="loginIn">欢迎<span class="user"></span>登录<button class="loginOut">退出登录</button></div>
    <div class="noLogin">
        <a href="./01_login.html">去登录</a>
        <a href="./02_reg.html">还没有账号，去注册</a>
    </div>



    <div class="container">

        <ul>
            <!-- <li>
                <a href="">
                    <img src="" alt="">
                    <h3></h3>
                    <p></p>
                    <strong>999</strong>
                    <span>300</span>
                </a>
            </li> -->
        </ul>

        <div class="page">
            <span class="prev off">&lt;</span>
            <span class="page2">1</span>
            <span class="next">&gt;</span>
            <span class="all" style="padding-left: 100px;">共10页</span>
        </div>
    </div>


    <script src="../js/ajax.js"></script>
    <script>


        // 分页
        //    前端控制每页显示多少条数据    每页显示三条数据

        //     需要后端告诉我们总共有多少条数据



        const oPrev = document.querySelector('.prev');
        const oNext = document.querySelector('.next');
        const oPageAll = document.querySelector('.all');
        const oPage = document.querySelector('.page2');
        const oUl = document.querySelector('ul');

        // 每一页显示的数据条数
        const size = 3;
        let page = 1;

        let pageAll ;

        renderList();



        function renderList() {
            ajax({
                type: 'get',
                data: {
                    size,
                    page
                },
                url: '../php/page.php',
                cb: data => {
                    console.log(data);
                    const { status,list } = data;
                    // 总页数
                    pageAll = Math.ceil(data.pageAll / size) ;
                    if (status) {
                        // 页数需要向上取整  
                        oPageAll.innerHTML = pageAll;

                        // 渲染页面
                        let html = '';
                        list.forEach(({ goods_des, goods_price, goods_title, goods_img, goods_xl, goods_id }) => {
                            html += `
                                <li>
                                    <a href="./04_detail.html?id=${goods_id}">
                                        <img src="${goods_img}" alt="">
                                        <h3>${goods_title}</h3>
                                        <p>${goods_des}</p>
                                        <strong>价格：${goods_price}</strong>
                                        <span>销量：${goods_xl}</span>
                                    </a>
                                </li>
                            `
                        })
                        oUl.innerHTML = html;

                    } else {
                        alert(msg);
                    }
                }
            })
        }








        // 下翻页
        oNext.onclick = function () {
            // contains 判断类名中是否存在这个名字
            if (!this.classList.contains('off')) {
                page++;
                oPage.innerHTML = page;
                if (page === pageAll) {
                    this.classList.add('off');
                }
                renderList()

                // 给上翻页去掉off
                if(oPrev.classList.contains('off')) {
                    oPrev.classList.remove('off');
                }
            }

        }



        // 上翻页
        oPrev.onclick = function() {
            // 先判断能不能翻页
            if(!this.classList.contains('off')) {
                page-- ;
                oPage.innerHTML = page ;
                if (page === 1) {
                    this.classList.add('off');
                }
                renderList()
                
                // 给下翻页去掉off
                if(oNext.classList.contains('off')) {
                    oNext.classList.remove('off');
                }

            }
        }






    </script>

</body>

</html>